import React, { useState } from 'react';
import { Button, Col, DatePicker, Drawer, Form, Input, Row, Select, Space } from 'antd';

const { Option } = Select;

export interface CreateFormValueType extends Partial<TeacherAPI.UpdateTeacherParam> {
  cardId?: string;
  mobile?: string; // 手机号
  name?: string; // 姓名
  birthday?: string; // 出生日期，假设后端返回的是 ISO 8601 格式的日期字符串
  gender?: number; // 性别
  parentName?: string; // 家长姓名
  parentRelationship?: string; // 和孩子关系
  schoolName?: string; // 学校名称
  address?: string; // 家庭住址
  comment?: string; // 备注
  visitorId?: number; // 访客ID
}

export interface FormProps {
  visible: boolean;
  onCancel: () => void;
  onSubmit: (values: CreateFormValueType) => Promise<void>;
}




const App: React.FC<FormProps> = (props) => {

  const [form] = Form.useForm();

  return (
    <>
      <Drawer
        title="新建学生账号"
        width={720}
        onClose={() => props.onCancel()}
        open={props.visible}
        styles={{
          body: {
            paddingBottom: 80,
          },
        }}
        extra={
          <Space>
            <Button onClick={() => props.onCancel()}>取消</Button>
            <Button onClick={() => props.onSubmit(form.getFieldsValue())} type="primary">
              提交
            </Button>
          </Space>
        }
      >
        <Form
          layout="vertical"
          form={form}
        >
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item
                name="cardId"
                label="会员卡号"
                rules={[{ required: true, message: '请输入会员卡号' }]}
              >
                <Input placeholder="请输入会员卡号" />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                name="name"
                label="姓名"
                rules={[{ required: true, message: '请输入姓名' }]}
              >
                <Input placeholder="请输入姓名" />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item
                name="gender"
                label="性别"
                rules={[{ required: true, message: '请输入性别' }]}
              >
                <Select placeholder="请输入性别">
                  <Option value="0">男</Option>
                  <Option value="1">女</Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                name="birthday"
                label="出生日期"
                rules={[{ required: true, message: '请输入出生日期' }]}
              >
                <DatePicker
                  style={{ width: '100%' }}
                />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item
                name="mobile"
                label="手机号"
                rules={[{ required: true, message: '请输入手机号' }]}
              >
                <Input placeholder="请输入手机号" />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                name="parentName"
                label="家长姓名"
                rules={[{ required: true, message: '请输入家长姓名' }]}
              >
                <Input placeholder="请输入家长姓名" />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item
                name="parentRelationship"
                label="和孩子关系"
                rules={[{ required: true, message: '请输入和孩子关系' }]}
              >
                <Input placeholder="请输入和孩子关系" />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                name="schoolName"
                label="学校"
                rules={[{ required: true, message: '请输入学校' }]}
              >
                <Input placeholder="请输入学校" />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item
                name="address"
                label="家庭住址"
                rules={[{ required: true, message: '请输入家庭住址' }]}
              >
                <Input placeholder="请输入家庭住址" />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                name="visitorId"
                label="访客ID"
                rules={[{ required: true, message: '访客ID' }]}
              >
                <Input placeholder="访客ID" />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={24}>
              <Form.Item
                name="comment"
                label="备注"
              >
                <Input.TextArea rows={4} placeholder="请输入备注" />
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Drawer>
    </>
  );
};

export default App;